<template>
  <div class="box">
    <aside-box>
      <template #zh> svg柱状图 </template>
      <template #en> bar chart </template>
      <div class="bar" ref="barRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

const xAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const yAxisData = [10, 20, 30, 50, 60, 70, 100];

const colorList = [
  "#4591e3",
  "#04b8e5",
  "#04dde5",
  "#04e5bd",
  "#04e57e",
  "#fedb5b",
  "#e59e04",
];

const markPointData = [];

const barWidth = 14;

const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="105" viewBox="0 0 14 105"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_1_6290"><stop offset="0%" stop-color="#28A9A2" stop-opacity="1"/><stop offset="100%" stop-color="#28A9A2" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_1_6296"><stop offset="0%" stop-color="#35FFF4" stop-opacity="1"/><stop offset="100%" stop-color="#35FFF4" stop-opacity="0"/></linearGradient></defs><g><g><rect x="0" y="0" width="7" height="105" rx="0" fill="url(#master_svg0_1_6290)" fill-opacity="1"/></g><g><rect x="7" y="0" width="7" height="105" rx="0" fill="url(#master_svg1_1_6296)" fill-opacity="1"/></g></g></svg>`;

// 转换为Base64格式
const svgDataURL = "data:image/svg+xml;base64," + btoa(svgStr);

yAxisData.forEach((v, i) => {
  //添加顶部渐变
  markPointData.push({
    xAxis: xAxisData[i],
    yAxis: v,
    symbol: "path://M 0 5 L 15 10 L 30 5 L 15 0 L 0 5 Z", //菱形图标
    symbolSize: [barWidth, barWidth * 0.5],
    itemStyle: {
      // color: "rgba(126, 255, 248,1)", // 设置顶部单个色调
      color: colorList[i], // 设置顶部动态色调
    },
  });
});
const option = {
  tooltip: {},
  grid: {
    containLabel: true,
    left: "2%",
    top: "15%",
    bottom: "2%",
    right: "5%",
  },
  xAxis: {
    axisLine: {
      show: true,
      lineStyle: {
        color: "#fff",
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      // 控制轴标签样式
      color: "#fff", // 设置轴标签文字颜色
      fontSize: 12, // 设置轴标签文字大小
      fontFamily: "阿里妈妈数黑体 Bold",
    },
    data: xAxisData,
  },
  yAxis: {
    type: "value",
    name: "销量",
    axisLine: {
      show: false,
      lineStyle: {
        color: "#fff",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#fff",
        width: 0.5,
      },
    },
    axisLabel: {
      color: "#B4C0CC",
      fontSize: 12,
      fontFamily: "阿里妈妈数黑体 Bold",
      // showMinLabel: false, //不显示最小刻度线值
      // showMaxLabel: false, //不显示最大刻度线值
    },
  },
  series: [
    {
      name: "销量",
      type: "pictorialBar",
      data: yAxisData,
      barWidth: barWidth,
      markPoint: {
        data: markPointData,
        silent: true,
      },
      // symbol: `image://${svgDataURL}`, // 设置柱体单个色调
      // 设置柱体动态色调
      symbol: (val, params) => {
        // console.log(val, params);
        return `image://data:image/svg+xml;base64,${btoa(
          `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="105" viewBox="0 0 14 105"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_1_6290"><stop offset="0%" stop-color="${
            colorList[params.dataIndex]
          }" stop-opacity="1"/><stop offset="100%" stop-color="${
            colorList[params.dataIndex]
          }" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_1_6296"><stop offset="0%" stop-color="${
            colorList[params.dataIndex]
          }" stop-opacity="1"/><stop offset="100%" stop-color="${
            colorList[params.dataIndex]
          }" stop-opacity="0"/></linearGradient></defs><g><g><rect x="0" y="0" width="7" height="105" rx="0" fill="url(#master_svg0_1_6290)" fill-opacity="1"/></g><g><rect x="7" y="0" width="7" height="105" rx="0" fill="url(#master_svg1_1_6296)" fill-opacity="1"/></g></g></svg>`
        )}`;
      },
      itemStyle: {
        // 设置每个柱子的颜色，这将影响tooltip中显示的颜色
        color: (params) => {
          return colorList[params.dataIndex];
        },
      },
      label: {
        show: true,
        position: "top",
        color: "#fff",
        fontSize: 12,
        // fontFamily: "阿里妈妈数黑体 Bold",
      },
    },
  ],
};

const [barRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .bar {
    width: 100%;
    height: 200px;
  }
}
</style>